{% extends 'base.html' %}
{% load static %}

{% block title %}创建维修记录{% endblock %}

{% block content %}
<div class="container-fluid">
    <div class="row justify-content-center">
        <div class="col-md-10">
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0"><i class="fas fa-plus me-2"></i>创建维修记录</h5>
                </div>
                
                <div class="card-body">
                    <form method="post" id="maintenanceForm">
                        {% csrf_token %}
                        
                        <div class="row">
                            <!-- 基本信息 -->
                            <div class="col-md-6">
                                <div class="card mb-4">
                                    <div class="card-header">
                                        <h6 class="mb-0">基本信息</h6>
                                    </div>
                                    <div class="card-body">
                                        <div class="mb-3">
                                            <label for="asset" class="form-label">资产 <span class="text-danger">*</span></label>
                                            <select class="form-select" id="asset" name="asset" required>
                                                <option value="">请选择资产</option>
                                                {% for asset in assets %}
                                                    <option value="{{ asset.pk }}">
                                                        {{ asset.name }} ({{ asset.asset_number }})
                                                    </option>
                                                {% endfor %}
                                            </select>
                                        </div>
                                        
                                        <div class="mb-3">
                                            <label for="maintenance_type" class="form-label">维修类型 <span class="text-danger">*</span></label>
                                            <select class="form-select" id="maintenance_type" name="maintenance_type" required>
                                                <option value="">请选择维修类型</option>
                                                {% for value, label in type_choices %}
                                                    <option value="{{ value }}">{{ label }}</option>
                                                {% endfor %}
                                            </select>
                                        </div>
                                        
                                        <div class="mb-3">
                                            <label for="priority" class="form-label">优先级 <span class="text-danger">*</span></label>
                                            <select class="form-select" id="priority" name="priority" required>
                                                {% for value, label in priority_choices %}
                                                    <option value="{{ value }}" {% if value == 'medium' %}selected{% endif %}>
                                                        {{ label }}
                                                    </option>
                                                {% endfor %}
                                            </select>
                                        </div>
                                        
                                        <div class="mb-3">
                                            <label for="title" class="form-label">维修标题 <span class="text-danger">*</span></label>
                                            <input type="text" class="form-control" id="title" name="title" 
                                                   placeholder="请输入维修标题" required>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                            <!-- 详细信息 -->
                            <div class="col-md-6">
                                <div class="card mb-4">
                                    <div class="card-header">
                                        <h6 class="mb-0">详细信息</h6>
                                    </div>
                                    <div class="card-body">
                                        <div class="mb-3">
                                            <label for="description" class="form-label">问题描述 <span class="text-danger">*</span></label>
                                            <textarea class="form-control" id="description" name="description" 
                                                      rows="4" placeholder="请详细描述需要维修的问题..." required></textarea>
                                        </div>
                                        
                                        <div class="mb-3">
                                            <label for="scheduled_at" class="form-label">计划维修时间</label>
                                            <input type="datetime-local" class="form-control" id="scheduled_at" name="scheduled_at">
                                            <div class="form-text">如不填写，将使用当前时间</div>
                                        </div>
                                        
                                        <div class="mb-3">
                                            <label for="technician" class="form-label">指定技师</label>
                                            <select class="form-select" id="technician" name="technician">
                                                <option value="">请选择技师</option>
                                                {% for technician in technicians %}
                                                    <option value="{{ technician.pk }}">
                                                        {{ technician.get_full_name|default:technician.username }}
                                                    </option>
                                                {% endfor %}
                                            </select>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <!-- 成本和供应商信息 -->
                        <div class="card mb-4">
                            <div class="card-header">
                                <h6 class="mb-0">成本和供应商信息</h6>
                            </div>
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="mb-3">
                                            <label for="estimated_cost" class="form-label">预估成本</label>
                                            <div class="input-group">
                                                <span class="input-group-text">¥</span>
                                                <input type="number" class="form-control" id="estimated_cost" 
                                                       name="estimated_cost" step="0.01" min="0" 
                                                       placeholder="0.00">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="mb-3">
                                            <label for="supplier" class="form-label">维修供应商</label>
                                            <select class="form-select" id="supplier" name="supplier">
                                                <option value="">请选择供应商</option>
                                                {% for supplier in suppliers %}
                                                    <option value="{{ supplier.pk }}">{{ supplier.name }}</option>
                                                {% endfor %}
                                            </select>
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="mb-3">
                                    <label for="notes" class="form-label">备注信息</label>
                                    <textarea class="form-control" id="notes" name="notes" rows="3" 
                                              placeholder="请输入其他备注信息..."></textarea>
                                </div>
                            </div>
                        </div>
                        
                        <!-- 提交按钮 -->
                        <div class="d-flex justify-content-between">
                            <a href="{% url 'assets:maintenance_list' %}" class="btn btn-secondary">
                                <i class="fas fa-arrow-left me-1"></i>返回列表
                            </a>
                            <div>
                                <button type="button" class="btn btn-outline-danger me-2" onclick="history.back()">
                                    <i class="fas fa-times me-1"></i>取消
                                </button>
                                <button type="submit" class="btn btn-primary">
                                    <i class="fas fa-save me-1"></i>创建维修记录
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const form = document.getElementById('maintenanceForm');
    const assetSelect = document.getElementById('asset');
    const typeSelect = document.getElementById('maintenance_type');
    const prioritySelect = document.getElementById('priority');
    const scheduledAtInput = document.getElementById('scheduled_at');
    
    // 设置默认的计划维修时间为明天
    const tomorrow = new Date();
    tomorrow.setDate(tomorrow.getDate() + 1);
    tomorrow.setHours(9, 0, 0, 0); // 设置为明天上午9点
    scheduledAtInput.value = tomorrow.toISOString().slice(0, 16);
    
    // 根据维修类型调整优先级建议
    typeSelect.addEventListener('change', function() {
        const type = this.value;
        if (type === 'emergency') {
            prioritySelect.value = 'urgent';
            prioritySelect.style.borderColor = '#dc3545';
        } else if (type === 'corrective') {
            prioritySelect.value = 'high';
            prioritySelect.style.borderColor = '#ffc107';
        } else if (type === 'preventive') {
            prioritySelect.value = 'medium';
            prioritySelect.style.borderColor = '#0dcaf0';
        } else {
            prioritySelect.style.borderColor = '';
        }
    });
    
    // 优先级颜色提示
    prioritySelect.addEventListener('change', function() {
        const priority = this.value;
        this.style.borderColor = '';
        this.classList.remove('border-danger', 'border-warning', 'border-info', 'border-secondary');
        
        if (priority === 'urgent') {
            this.classList.add('border-danger');
        } else if (priority === 'high') {
            this.classList.add('border-warning');
        } else if (priority === 'medium') {
            this.classList.add('border-info');
        } else {
            this.classList.add('border-secondary');
        }
    });
    
    // 表单验证
    form.addEventListener('submit', function(e) {
        const asset = assetSelect.value;
        const type = typeSelect.value;
        const priority = prioritySelect.value;
        const title = document.getElementById('title').value.trim();
        const description = document.getElementById('description').value.trim();
        
        if (!asset || !type || !priority || !title || !description) {
            e.preventDefault();
            alert('请填写所有必填项');
            return false;
        }
        
        if (title.length < 5) {
            e.preventDefault();
            alert('维修标题至少需要5个字符');
            document.getElementById('title').focus();
            return false;
        }
        
        if (description.length < 10) {
            e.preventDefault();
            alert('问题描述至少需要10个字符');
            document.getElementById('description').focus();
            return false;
        }
        
        // 确认提交
        if (!confirm('确定要创建这个维修记录吗？')) {
            e.preventDefault();
            return false;
        }
    });
    
    // 初始化优先级颜色
    prioritySelect.dispatchEvent(new Event('change'));
});
</script>
{% endblock %}
